.li-flying-superman {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  &.moving {
    .longfazers {
      .line {
        &:nth-child(1) {
          animation: lf 0.6s linear infinite;
          animation-delay: -5s;
        }

        &:nth-child(2) {
          animation: lf2 0.8s linear infinite;
          animation-delay: -1s;
        }

        &:nth-child(3) {
          animation: lf3 0.6s linear infinite;
        }

        &:nth-child(4) {
          animation: lf4 0.5s linear infinite;
          animation-delay: -3s;
        }
      }
    }
    .man {
      animation: speeder 0.4s linear infinite;
    }
  }

  .longfazers {
    width: 100%;
    height: 100%;

    .line {
      width: 20%;
      height: 2rpx;
      background: black;
      position: absolute;

      &:nth-child(1) {
        top: 20%;
        left: 20%;
      }

      &:nth-child(2) {
        top: 40%;
        left: 40%;
      }

      &:nth-child(3) {
        top: 60%;
        left: 60%;
      }

      &:nth-child(4) {
        top: 80%;
        left: 80%;
      }
    }
  }

  .man {
    position: absolute;
    top: 50%;
    margin-left: -50rpx;
    left: 50%;

    .backpack {
      height: 5rpx;
      width: 35rpx;
      background: #000;
      position: absolute;
      top: -19rpx;
      left: 60rpx;
      border-radius: 2rpx 10rpx 1rpx 0;
      .line {
        width: 30rpx;
        height: 1rpx;
        background: #000;
        position: absolute;

        &:nth-child(1) {
          animation: fazer1 0.2s linear infinite;
        }
        &:nth-child(2) {
          top: 3rpx;
          animation: fazer2 0.4s linear infinite;
        }
        &:nth-child(3) {
          top: 1rpx;
          animation: fazer3 0.4s linear infinite;
          animation-delay: -1s;
        }
        &:nth-child(4) {
          top: 4rpx;
          animation: fazer4 1s linear infinite;
          animation-delay: -1s;
        }
      }
    }

    .base {
      .body {
        position: absolute;
        width: 0;
        height: 0;
        border-top: 6rpx solid transparent;
        border-right: 100rpx solid #000;
        border-bottom: 6rpx solid transparent;

        &::before {
          content: '';
          height: 22rpx;
          width: 22rpx;
          border-radius: 50%;
          background: #000;
          position: absolute;
          right: -110rpx;
          top: -16rpx;
        }

        &::after {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-top: 0 solid transparent;
          border-right: 55rpx solid #000;
          border-bottom: 16rpx solid transparent;
          top: -16rpx;
          right: -98rpx;
        }
      }

      .face {
        position: absolute;
        height: 12rpx;
        width: 20rpx;
        background: #000;
        border-radius: 20rpx 20rpx 0 0;
        transform: rotate(-40deg);
        right: -125rpx;
        top: -15rpx;

        &::before {
          content: '';
          height: 12rpx;
          width: 12rpx;
          background: #000;
          right: 4rpx;
          top: 7rpx;
          position: absolute;
          transform: rotate(40deg);
          transform-origin: 50% 50%;
          border-radius: 0 0 0 2rpx;
        }
      }
    }
  }
}

@keyframes speeder {
  0% {
    transform: translate(2rpx, 1rpx) rotate(0deg);
  }
  10% {
    transform: translate(-1rpx, -3rpx) rotate(-1deg);
  }
  20% {
    transform: translate(-2rpx, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1rpx, 2rpx) rotate(0deg);
  }
  40% {
    transform: translate(1rpx, -1rpx) rotate(1deg);
  }
  50% {
    transform: translate(-1rpx, 3rpx) rotate(-1deg);
  }
  60% {
    transform: translate(-1rpx, 1rpx) rotate(0deg);
  }
  70% {
    transform: translate(3rpx, 1rpx) rotate(-1deg);
  }
  80% {
    transform: translate(-2rpx, -1rpx) rotate(1deg);
  }
  90% {
    transform: translate(2rpx, 1rpx) rotate(0deg);
  }
  100% {
    transform: translate(1rpx, -2rpx) rotate(-1deg);
  }
}

@keyframes lf {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}
@keyframes lf2 {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}
@keyframes lf3 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}
@keyframes lf4 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}

@keyframes fazer1 {
  0% {
    left: 0;
  }
  100% {
    left: -80rpx;
    opacity: 0;
  }
}
@keyframes fazer2 {
  0% {
    left: 0;
  }
  100% {
    left: -100rpx;
    opacity: 0;
  }
}
@keyframes fazer3 {
  0% {
    left: 0;
  }
  100% {
    left: -50rpx;
    opacity: 0;
  }
}
@keyframes fazer4 {
  0% {
    left: 0;
  }
  100% {
    left: -150rpx;
    opacity: 0;
  }
}
